import React, {useState} from 'react';
import style from "./Trash.module.scss";
import {Button, Empty, message, Modal, Space, Spin, Table, Tag, Typography} from "antd";
import ListSearch from "../../components/ListSearch";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListPage from "../../components/ListPage";
import {useRequest} from "ahooks";
import {deleteQuestionService, updateQuestionService} from "../../service/question";

const {confirm} = Modal

const {Title} = Typography
const Trash: React.FC = () => {
    const {data = {}, loading = false, refresh} = useLoadQuestionListData({isDeleted: true})
    const {total = 0, list = []} = data
    const columns = [
        {title: "问卷名", dataIndex: "title"},
        {
            title: "是否发布", dataIndex: "isPublished",
            render(isPublish: boolean) {
                return isPublish ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
            }
        },
        {title: "答卷数量", dataIndex: "answerCount"},
        {title: "答卷时间", dataIndex: "createAt"},
    ]
    const [sekectionType, setSekectionType] = useState<"checkbox" | "radio">("checkbox")
    const [selectIds, setSelectIds] = useState<string[]>([])

    // 恢复功能
    const {run: recover} = useRequest(async () => {
        for await (const item of selectIds) {
            await updateQuestionService(item, {isDeleted: false})
        }
    }, {
        manual: true,
        debounceWait: 500,
        onSuccess(result) {
            message.success("恢复完成")
            refresh()
            setSelectIds([])
        }
    })

    const {run: delQusetion} = useRequest(async () => {
        await deleteQuestionService(selectIds)
    }, {
        manual: true,
        onSuccess(result) {
            message.success("彻底删除成功")
            refresh()
            setSelectIds([])
        }
    })


    function del() {
        confirm({
            title: "确认彻底删除该问卷？",
            content: "删除以后不可找回",
            onOk() {
                delQusetion()
            }
        })
    }

    const tableElem = (
        <>
            <Space style={{marginBottom: '20px'}}>
                <Button disabled={selectIds.length === 0} type={'primary'} onClick={recover}>恢复</Button>
                <Button onClick={del} disabled={selectIds.length === 0} danger>彻底删除</Button>
            </Space>
            <Table dataSource={list}
                   rowKey={q => q._id}
                   pagination={false}
                   rowSelection={{
                       type: sekectionType,
                       onChange(selectedRowKeys, selectedRows) {
                           console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                           setSelectIds(selectedRowKeys as string[])
                       }
                   }}
                   columns={columns}/>
        </>
    )


    return (
        <div>
            <div className={style.header}>
                <div className={style.left}>
                    <Title level={3}>我的问卷</Title>
                </div>
                <div className={style.right}>
                    <ListSearch/>
                </div>
            </div>
            <div className={style.content}>
                {loading && <div style={{textAlign: "center"}}>
                    <Spin/>
                </div>}
                {!loading && list.length === 0 && <Empty description={'暂无数据'}/>}
                {
                    list.length > 0 && tableElem
                }
            </div>
            <div className={style.footer}>
                <ListPage total={total}/>
            </div>
        </div>
    );
};

export default Trash;
